<template>
  <view class="scheduleContainer">
    <view class="leftBox">
      <view class="timeItem">
        <text>2月24日</text>
        <text>星期一</text>
      </view>
      <view class="timeItem active">
        <text>2月25日</text>
        <text>星期二</text>
      </view>
      <view class="timeItem">
        <text>2月26日</text>
        <text>星期三</text>
      </view>
      <view class="timeItem">
        <text>2月27日</text>
        <text>星期四</text>
      </view>
      <view class="timeItem">
        <text>2月28日</text>
        <text>星期五</text>
      </view>
      <view class="timeItem">
        <text>3月3日</text>
        <text>星期一</text>
      </view>
    </view>
    <view class="rightBox">
      <text>上午：08:30 - 11:50</text>
      <view>
        <text class="h3">培训内容：</text>
        <text class="p">智能变电站仿真系统介绍及基本操作、一次设备原理、结构、运行特性(变压器、断路器等结构原理及运行特性)</text>
        <text class="h3">培训方式：</text>
        <text class="p">实操</text>
        <text class="h3">培训师(主带)：</text>
        <text class="p">张老师</text>
        <text class="h3">培训师(副带)：</text>
        <text class="p">李老师</text>
        <text class="h3">培训师：</text>
        <text class="p">赵老师</text>
        <text class="h3">培训地点：</text>
        <text class="p">教学主楼2210</text>
      </view>
      <text>下午：14:30 - 17:30</text>
      <view>
        <text class="h3">培训内容：</text>
        <text class="p">智能变电站仿真系统介绍及基本操作、一次设备原理、结构、运行特性(电压互感器、电容器等结构原理及运行特性)</text>
        <text class="h3">培训方式：</text>
        <text class="p">实操</text>
        <text class="h3">培训师(主带)：</text>
        <text class="p">张老师</text>
        <text class="h3">培训师(副带)：</text>
        <text class="p">李老师</text>
        <text class="h3">培训师：</text>
        <text class="p">赵老师</text>
        <text class="h3">培训地点：</text>
        <text class="p">教学主楼2210</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'Kcb',
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.scheduleContainer{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  .leftBox{
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: 200rpx;
    border-right: 1rpx solid #ccc;
    box-sizing: border-box;
    .timeItem{
      border-bottom: 1rpx solid #ccc;
      padding: 10rpx 0;
      text{
        display: block;
        font-size: 28rpx;
        color: #333;
        text-align: center;
      }
      &.active{
        background: #4683d4;
        text{
          color: #fff;
        }
      }
    }
  }
  .rightBox{
    position: absolute;
    left: 200rpx;
    right: 0;
    bottom: 0;
    top: 0;
    overflow-x: hidden;
    >text{
      font-size: 36rpx;
      font-weight: bold;
      background: #f1f1f1;
      display: block;
      padding: 20rpx;
    }
    >view{
      padding:10rpx 20rpx 20rpx;
      text{
        display: block;
      }
      .h3{
        font-size: 32rpx;
        font-weight: bold;
        margin: 20rpx 0 0;
      }
      .p{
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
  }
}
</style>
